<style lang="less">
  .trauma-quality{
    width: 100%;
    height: 100%;
    overflow: hidden;
    .box-chose{
      height: 80px;
      padding-left: 30px;
      padding-top: 20px;
    }
    .box-echart{
      height: ~'calc(100% - 80px)';
      overflow: auto;
      background: #f0f2f5;
      padding: 20px 20px 0 20px;
      .box-card{
        width: 32%;
        height: 506px;
        display: inline-block;
        margin: 0 10px;
        .el-card__body{
          height: ~'calc(100% - 55px)';
        }
      }
    }
  }
</style>

<template>
  <div class="trauma-quality">
    <div class="box-chose">
      <el-select v-model="timeValue" @change="changeTime">
        <el-option v-for="(item, index) in timeList" :key="index" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="indicatorsPlaceholder" style="margin-left: 15px;">
        <el-option v-for="(item, index) in timeList" v-show="false" :key="index" :label="item.label" :value="item.label" />
        <el-tree
          :data="data"
          show-checkbox
          :props="defaultProps"
          node-key="id"
          :default-checked-keys="defaultKeys"
          @check-change="handleCheckChange"
        />
      </el-select>
      <el-button style="float: right; margin-right: 20px;">打印</el-button>
    </div>
    <div v-loading="loading" class="box-echart">
      <el-card v-for="(item, index) in chartData" :key="index" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ index + 1 }}、{{ item.name }}</span>
        </div>
        <quality-chart :chart-data="item.optionData" :index="item.index" :single-chart-data="singleChartData" :disease-type="diseaseType" @clickIcon="clickIcon" @clickZuo="clickZuo" @clickYou="clickYou" />
      </el-card>
    </div>
  </div>
</template>

<script>
import qualityChart from './quality-chart'
import { getStatisticChestPainCpc } from '@/api/statistical/statistical-analysis'
export default {
  name: 'ChestPainQuality',
  components: {
    qualityChart
  },
  data() {
    return {
      loading: false,
      timeValue: 'quarter',
      diseaseType: 'trauma',
      indicatorsPlaceholder: '筛选指标',
      indicators: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      defaultKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      timeList: [{
        label: '季度',
        value: 'quarter'
      }, {
        label: '月度',
        value: 'month'
      }, {
        label: '年度',
        value: 'year'
      }],
      data: [{
        id: 1,
        label: '严重创伤病人数量'
      }, {
        id: 2,
        label: '创伤病人总数'
      }, {
        id: 3,
        label: '创伤病人病死率'
      }, {
        id: 4,
        label: '人工气道建立时间(分钟)'
      }, {
        id: 5,
        label: '紧急手术术前准备时间(分钟)'
      }, {
        id: 6,
        label: '严重创伤病人平均住院时间(天)'
      }, {
        id: 7,
        label: '创评分(GCS TI ISS)完成比例'
      }, {
        id: 8,
        label: '接受外院转诊病人比例'
      }, {
        id: 9,
        label: '转诊治疗的创伤病人比例'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      chartData: [],
      singleChartData: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.chartData = []
      let data = [{
        index: 1,
        name: '严重创伤病人数量',
        optionData: {
          averageData: ['4'],
          successRate: ['50'],
          timeData: ['2023Q2'],
          unit: '人'
        },
        tableData: [{
          average: '4',
          count: '2',
          reachRate: '50',
          timeName: '2023Q2',
          total: '4'
        }]
      }, {
        index: 2,
        name: '创伤病人总数',
        optionData: {
          averageData: ['1', '5'],
          successRate: ['13', '87'],
          timeData: ['2023Q1', '2023Q2'],
          unit: '人'
        },
        tableData: [{
          average: '1',
          count: '2',
          reachRate: '13',
          timeName: '2023Q1',
          total: '4'
        }, {
          average: '5',
          count: '2',
          reachRate: '87',
          timeName: '2023Q2',
          total: '4'
        }]
      }, {
        index: 3,
        name: '创伤病人病死率',
        optionData: {
          averageData: ['0'],
          successRate: ['0'],
          timeData: ['2023Q1'],
          unit: '%'
        },
        tableData: [{
          average: '0',
          count: '2',
          reachRate: '0',
          timeName: '2023Q1',
          total: '4'
        }]
      }, {
        index: 4,
        name: '人工气道建立时间(分钟)',
        optionData: {
          averageData: ['3', '6', '6', '5'],
          successRate: ['15', '30', '30', '25'],
          timeData: ['2023Q1', '2023Q2', '2023Q3', '2023Q4'],
          unit: '分钟'
        },
        tableData: [{
          average: '3',
          count: '2',
          reachRate: '15',
          timeName: '2023Q1',
          total: '4'
        }, {
          average: '6',
          count: '2',
          reachRate: '30',
          timeName: '2023Q2',
          total: '4'
        }, {
          average: '6',
          count: '2',
          reachRate: '30',
          timeName: '2023Q3',
          total: '4'
        }, {
          average: '5',
          count: '2',
          reachRate: '25',
          timeName: '2023Q4',
          total: '4'
        }]
      }, {
        index: 5,
        name: '紧急手术术前准备时间(分钟)',
        optionData: {
          averageData: ['3'],
          successRate: ['34'],
          timeData: ['2023Q3'],
          unit: '分钟'
        },
        tableData: [{
          average: '3',
          count: '2',
          reachRate: '34',
          timeName: '2023Q3',
          total: '4'
        }]
      }, {
        index: 6,
        name: '严重创伤病人平均住院时间(天)',
        optionData: {
          averageData: ['12', '18'],
          successRate: ['40', '60'],
          timeData: ['2023Q2', '2023Q4'],
          unit: '天'
        },
        tableData: [{
          average: '12',
          count: '2',
          reachRate: '40',
          timeName: '2023Q2',
          total: '4'
        }, {
          average: '18',
          count: '2',
          reachRate: '60',
          timeName: '2023Q4',
          total: '4'
        }]
      }, {
        index: 7,
        name: '创评分(GCS TI ISS)完成比例',
        optionData: {
          averageData: ['2'],
          successRate: ['20'],
          timeData: ['2023Q4'],
          unit: '%'
        },
        tableData: [{
          average: '2',
          count: '2',
          reachRate: '20',
          timeName: '2023Q4',
          total: '4'
        }]
      }, {
        index: 8,
        name: '接受外院转诊病人比例',
        optionData: {
          averageData: ['0'],
          successRate: ['0'],
          timeData: ['2023Q1'],
          unit: '%'
        },
        tableData: [{
          average: '0',
          count: '2',
          reachRate: '0',
          timeName: '2023Q1',
          total: '4'
        }]
      }, {
        index: 9,
        name: '转诊治疗的创伤病人比例',
        optionData: {
          averageData: ['1', '5', '2', '2'],
          successRate: ['10', '50', '20', '20'],
          timeData: ['2023Q1', '2023Q2', '2023Q3', '2023Q4'],
          unit: '%'
        },
        tableData: [{
          average: '1',
          count: '2',
          reachRate: '10',
          timeName: '2023Q1',
          total: '4'
        }, {
          average: '5',
          count: '2',
          reachRate: '50',
          timeName: '2023Q2',
          total: '4'
        }, {
          average: '2',
          count: '2',
          reachRate: '20',
          timeName: '2023Q3',
          total: '4'
        }, {
          average: '2',
          count: '2',
          reachRate: '20',
          timeName: '2023Q4',
          total: '4'
        }]
      }]
      data.forEach(el => {
        el.index = el.index - 1
      })
      this.chartData = data
      this.loading = false
      // getStatisticChestPainCpc({
      //   hospitalId: this.$store.getters.hospitalId,
      //   classify: this.timeValue,
      //   indexes: this.indicators.join(',')
      // }).then(res => {
      //   if (res.code === 0) {
      //     if (res.data && res.data.length > 0) {
      //       res.data.forEach(el => {
      //         el.index = el.index - 1
      //       })
      //     }
      //     this.chartData = res.data
      //     this.loading = false
      //   } else {
      //     this.loading = false
      //   }
      // }).catch(() => {
      //   this.loading = false
      // })
    },
    changeTime() {
      this.init()
    },
    clickIcon(index) {
      this.singleChartData = this.chartData[index]
    },
    clickZuo(index) {
      if (index === 0) {
        this.singleChartData = this.chartData[this.chartData.length - 1]
      } else {
        this.singleChartData = this.chartData[index - 1]
      }
    },
    clickYou(index) {
      if (index > this.chartData.length - 1 || index === this.chartData.length - 1) {
        this.singleChartData = this.chartData[0]
      } else {
        this.singleChartData = this.chartData[index + 1]
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.indicators.push(data.id)
      } else {
        this.indicators.splice(this.indicators.indexOf(data.id), 1)
      }
      this.init()
    }
  }
}
</script>
